import QtQuick
//导入QML模块，使程序可以使用模块中定义的QML类型
//指定模块的版本2.12，确保API兼容性
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

Window {
    //应用程序的主窗口
    width: 800
    height: 800
    visible: true
    title: qsTr("Hello World")
   //子元素
   Button {
       id:eixtbutton
       text:"退出按钮"
       anchors.left: parent.left//布局系统，用于定位元素,设置窗口的左边界为锚点
       anchors.leftMargin: 100//与定位的左锚点的距离
       anchors.bottom:parent.bottom//设置窗口底部作为底部锚点
       anchors.bottomMargin: 200//距离底部锚点200

       onClicked: {
           //设置槽函数
           Qt.quit();
       }}
    //设置矩形元素
    Rectangle{
        id:rectangle
        x:100//起始位置
        y:150
        color:"#00B000"
        width:190//矩形形状
        height:70
    }

    CheckBox{
        id:check
        text:"复选框"
        checked:true
        x:200
        y:300

        indicator:Rectangle{
        implicitWidth:60
        implicitHeight:60
        x:parent.leftPadding
        y:parent.height/2-height/2;
        radius: 3//边框圆角

        border.color:check.down?"#18a81a":"*888999" // 边框颜色
        Rectangle{
            width: 30
            height: 30
            x:15
            y:15
            radius: 3

            color: check.down?"#18a81a":"*888999"
        }}
        //改变字体格式
        contentItem: Text{
            text:check.text
            font.pixelSize: 30
            color:check.down?"#18a81a":"*888999"
            verticalAlignment: Text.AlignVCenter//垂直对齐
            leftPadding: check.indicator.width+check.spacing
        }
    }

    Rectangle{
        id:irect
        x:400
        y:400
        width:100
        height:100
        state: "normal" // 设置默认状态

        states:[//状态列表
            State{
                name:"normal"
                PropertyChanges {
                    target: irect
                    color:"red"

                }


            },
            State{
                name:"light"
                PropertyChanges {
                    target: irect
                    color:"lightblue"
                    width:200
                    height:100

                }

            }

        ]
    transitions: [
        Transition {
            from: "normal"
            to: "light"
            PropertyAnimation{
                properties: "color,width,height"
                duration: 3000//过程时间
            }

        }
    ]
    }
    Button{
        id:changesstatess
        x:400
        y:510
        text: "change state"
        onClicked: irect.state="light";
    }

    Button{
        id:recoverss
        x:600
        y:510
        text: "recoverss state"
        onClicked: irect.state="normal";
    }




}
